{% stylesheet %}
  .header_icons {
    color: var(--search-bar-color);
  }
  .header_icons a {
    color: var(--search-bar-color);
  }

  .header_icons .cart_icon {
    color: var(--search-bar-color);
  }
  .header_icons .cart_icon:hover svg {
    transform: scale(1.15);
  }
  .header_icons .cart_icon svg {
    transition: all ease 0.3s;
  }
{% endstylesheet %}

<div class="header_icons flex md:gap-6 gap-4 items-center flex-1 justify-end">
  {% if data.is_member %}
    <div class="user md:hidden inline-flex items-center">
      <a href="/account/login" class="inline-flex items-center">
        <svg
          width="22"
          height="22"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          class="icon icon-account"
          viewBox="0 0 1024 1024"
          width="100%"
          height="100%"
        >
          <path fill="currentColor" class="path1" d="M486.4 563.2c-155.275 0-281.6-126.325-281.6-281.6s126.325-281.6 281.6-281.6 281.6 126.325 281.6 281.6-126.325 281.6-281.6 281.6zM486.4 51.2c-127.043 0-230.4 103.357-230.4 230.4s103.357 230.4 230.4 230.4c127.042 0 230.4-103.357 230.4-230.4s-103.358-230.4-230.4-230.4z"></path><path fill="currentColor" class="path2" d="M896 1024h-819.2c-42.347 0-76.8-34.451-76.8-76.8 0-3.485 0.712-86.285 62.72-168.96 36.094-48.126 85.514-86.36 146.883-113.634 74.957-33.314 168.085-50.206 276.797-50.206 108.71 0 201.838 16.893 276.797 50.206 61.37 27.275 110.789 65.507 146.883 113.634 62.008 82.675 62.72 165.475 62.72 168.96 0 42.349-34.451 76.8-76.8 76.8zM486.4 665.6c-178.52 0-310.267 48.789-381 141.093-53.011 69.174-54.195 139.904-54.2 140.61 0 14.013 11.485 25.498 25.6 25.498h819.2c14.115 0 25.6-11.485 25.6-25.6-0.006-0.603-1.189-71.333-54.198-140.507-70.734-92.304-202.483-141.093-381.002-141.093z"></path>
        </svg>
      </a>
    </div>
  {% endif %}

  <div class="cart_icon flex relative cursor-pointer justify-center items-center icon-button__icon" id="cart_icon">
    <svg width="22" height="22" viewBox="0 0 30 30" class="icon icon-cart mr-2" enable-background="new 0 0 30 30">
      <g><g><path fill="currentColor" d="M20,6V5c0-2.761-2.239-5-5-5s-5,2.239-5,5v1H4v24h22V6H20z M12,5c0-1.657,1.343-3,3-3s3,1.343,3,3v1h-6V5z M24,28H6V8h4v3 h2V8h6v3h2V8h4V28z"></path></g></g>
    </svg>
    <span class="md:inline-flex hidden">{{ lang.checkout.cart }}</span>
    <span id="cart_number" class="inline-flex items-center justify-center ml-2">0</span>
  </div>

  {% if data.is_member %}
    <div class="user md:flex items-center hidden">
      <span class="py-1 pr-2">
        <a href="/account">{{ lang.layout.customer.account }}</a>
      </span>
      <span class="py-1">
        <a href="/account/login">{{ lang.layout.customer.login }}</a>
      </span>
    </div>
  {% endif %}
</div>
